<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="author" content="程月">
	<title>选项卡</title>
	<style>
		.box{
		width: 400px;
		border: 1px solid #000;
		margin: 50px auto;
	}
	.tab{
		margin: 0;
		padding: 0;
		list-style: none;
		background-color: #000;
	}
	.tab li{
		float: left;
		width: 60px;
		text-align: center;
		line-height: 26px;
		color: white;
	}
	.tab li.active{
		color: black;
		background-color: #eee;
	}
	p{
		display: none;
	}
	p:first-child{
		display: block;
	}
	.clearfix::after{
		content: '';
		clear: both;
		display: block;
		height: 0;
		visibility: hidden;
	}
	</style>
</head>
<body>
	<div class="box">
		<ul class="tab clearfix">
			<li class="active">新闻</li>
			<li>公告</li>
			<li>赛程</li>
		</ul>
		<div class="content">
			<p>1--新闻<br>新闻<br>新闻<br></p>
			<p>2--公告<br>公告<br>公告<br></p>
			<p>3--赛程<br>赛程<br>赛程<br></p>
		</div>
	</div>
	<script src="./jquery.js"></script>
</body>

</html>
<script>

     $('li').mouseover(function(){
		 $(this).css('background-color','#eee').css('color','#000')
		              .siblings().css('background-color','#000').css('color','#fff');
		 $('p').eq($(this).index()).css('display','block').siblings().css('display','none');
	 });

</script>